<template lang="pug">
  ModuleWrapper(title="农机推广应用（2020年）" flex="1")
    //.title
      | 农机作业面积：
      span.em 23.42万亩
    .chart-container
      .chart-wrap(ref="chart")
      .chart-legend
        StaticSimpleView.simple-static(v-for="(item, index) in staticData"
          :label="item.name" :value="item.value"
          :color="colorData[index]")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      colorData: ['#1860d0', '#45c761', '#1bd8bb', '#8ad10c', ],
      unitData: ['万亩', '万吨', '万吨'],
      staticData: [
        {value: 23.42, name: '农机作业面积'},
        {value: 11.27, name: '机械脱出农产品数'},
        {value: 2.86, name: '饲草料机械加工'},
      ]
    }
  },
  methods: {
    renderChart() {
      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
        color: this.colorData,
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}',
        },
        legend: {
          show: false,
          orient: 'vertical',
          top: '50%',
          left: 'right',
          textStyle: {
            color: '#ccc'
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['20%', '70%'],
            data: this.staticData,
            label: {
              formatter: '{c}',
              position: 'inside',
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  display: flex;
  flex-direction: column;
  .title{
    @include fontSie(20);
    color: #EFEFEF;
    padding-top: rem(10);
    padding-left: rem(10);
    .em{
      font-size: 1.2em;
      font-weight: bold;
    }
  }
  .chart-container{
    display: flex;
    flex: 1;
    .chart-wrap{
      flex: 1;
    }
    .chart-legend{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: rem(10);
    }
  }
}
</style>
